<script lang='ts' setup>
import { Ref, ref, watch } from "vue"
import { useRoute } from "vue-router"
import { useStore } from "/@/store"
import { RouteBreadcrumbMapping } from "/@/_types/sys/menu"
type BreadcrumbItemType = {
  title: string
  path: string
}

/**
 * 处理面包屑数据
 */
function getBreadcrumbItemList(
  routeBreadcrumbMapping: RouteBreadcrumbMapping,
  breadcrumbItemList: BreadcrumbItemType[]
) {
  breadcrumbItemList.push({
    title: routeBreadcrumbMapping.title,
    path: routeBreadcrumbMapping.url
  })
  if (routeBreadcrumbMapping.parent)
    getBreadcrumbItemList(routeBreadcrumbMapping.parent, breadcrumbItemList)
}

const props = defineProps({
  breadcrumbMappingUrl: String
})

const currentPath = props.breadcrumbMappingUrl || useRoute().fullPath

const breadcrumbItemList: Ref<BreadcrumbItemType[]> = ref([])
const map = useStore().state.user.routeBreadcrumbMappingMap

//处理面包屑数据
const routeBreadcrumbMapping = ref(map.get(currentPath))
if (routeBreadcrumbMapping.value != undefined) {
  getBreadcrumbItemList(routeBreadcrumbMapping.value, breadcrumbItemList.value)
  breadcrumbItemList.value.reverse()
}
</script>
<template>
  <jxtech-svg-icon :size="18" icon="#icon-lianjie
" color="#045dae"></jxtech-svg-icon>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">
      <span style="margin-left: 5px;">系统首页</span>
    </el-breadcrumb-item>
    <template v-for="(item,index) in breadcrumbItemList" :key="index">
      <el-breadcrumb-item :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item>
    </template>
  </el-breadcrumb>
</template>

